<template>
  <div class="gotosea">
    <h2>{{ sealist.title }}</h2>
    <h2>{{ sealist.twotitle }}</h2>
    <div class="gotosea_warp_img">
      <img :src="sealist.imgUrl" alt="" />
    </div>

    <div class="gotosea_item_warp tydisplay">
      <ul class="gotosea_item_list tydisplay">
        <li
          class="gotosea_item_list_li"
          v-for="(item, i) in sealist.list"
          :key="i"
        >
          <p>{{ item.name }}</p>
          <b>{{ item.num }}</b>
          <span>{{ item.geshu }}</span>
          <em>{{ item.fuhao }}</em>
        </li>
      </ul>
    </div>

    <div class="gotosea_warp_button">
      <button>免费试用</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "gotosea",
  props: ["sealist"],
};
</script>

<style scoped>
.tydisplay {
  display: flex;
}
.gotosea {
  background: #3798fc;
  padding: 30px 15px;
  text-align: center;
}
.gotosea > h2 {
  color: #fff;
  font-size: 1.8em;
  font-weight: normal;
}
.gotosea_warp_img {
  margin: 20px 0;
}
.gotosea_warp_img > img {
  width: 75%;
}
.gotosea_item_warp {
  justify-content: space-betweens;
  width: 100%;
}
.gotosea_item_list {
  justify-content: space-between;
  width: 90%;
  flex-wrap: wrap;
  padding-left: 45px;
}
.gotosea_item_list_li {
  width: 47%;
  margin-bottom: 40px;
  color: #fff;
  text-align: left;
}
.gotosea_item_list_li p {
  font-size: 1.2em;
  margin-bottom: 10px;
}
.gotosea_item_list_li b {
  font-size: 2.5em;
  font-weight: normal;
}
.gotosea_item_list_li span {
  font-size: 1.3em;
}
.gotosea_item_list_li em {
  font-size: 1.1em;
}
.gotosea_warp_button {
  padding-top: 10px;
}
.gotosea_warp_button>button {
  outline: none;
  border: 2px solid #fff;
  color: #fff;
  background: #3798fc;
  padding: 6px 70px;
  font-size: 1.2em;
  border-radius: 5px;
}
</style>